<script setup lang="ts">
import {
  Table,
  Form,
  FormItem,
  Button,
  Input,
  Tag,
  Popconfirm,
} from "ant-design-vue";
import pageWrap from "@/components/pageWrap/index.vue";
import { columns } from "./company.data";
import { defineAsyncComponent, onMounted, reactive, ref } from "vue";
import { useElementSize } from "@vueuse/core";
import { companyListApi, DelApi } from "@/api/System/company";
import { notify } from "@/utils/anted";
import dayjs from "dayjs";

const companyDrawerRef = ref();

const CompanyDrawer = defineAsyncComponent(
  () => import("@/views/system/company/components/companyDrawer.vue")
);
const tableContent = ref(null);
const { height } = useElementSize(tableContent);

const dataSource: any = ref([]);

const useForm = Form.useForm;
const modelStateRef = reactive({
  title: "",
});

const { resetFields } = useForm(modelStateRef);
const onSubmit = () => {
  getTableList();
};
// 点击新增
const handleAdd = () => {
  companyDrawerRef.value.open("add", "新增组织");
};
const handleResize = () => {
  resetFields();
  getTableList();
};
// 点击修改
const handleEdit = (row: any) => {
  companyDrawerRef.value.open("edit", `修改组织(${row.meta?.title})`, row);
};
// 点击新增下级
const handleAddMenu = (row: any) => {
  companyDrawerRef.value.open("addSon", "新增下级组织", row);
};

onMounted(() => {
  getTableList();
  resetFields();
});
// 查询table数据
const getTableList = async () => {
  try {
    const res = await companyListApi({});
    const { data } = res;
    dataSource.value = deleteChildren(data);
  } catch (error) {
  } finally {
  }
};
// 处理children为空
const deleteChildren = (arr: any) => {
  let list = arr;
  for (let i = list.length; i--; i > 0) {
    if (list[i].children) {
      if (list[i].children.length) {
        deleteChildren(list[i].children);
      } else {
        delete list[i].children;
      }
    }
  }
  return arr;
};
const handleDelete = async (record: any) => {
  await DelApi(record.id);
  notify("删除成功！", { type: "success" });
};
</script>
<template>
  <pageWrap>
    <div class="bg-white p-2" style="height: 10%">
      <Form layout="inline">
        <FormItem label="组织名称">
          <Input
            v-model:value="modelStateRef.title"
            placeholder="请输入组织名称"
          />
        </FormItem>

        <FormItem>
          <Button type="primary" @click.prevent="onSubmit">查询</Button>
          <Button style="margin-left: 10px" @click="handleResize">重置</Button>
          <Button style="margin-left: 10px" @click="handleAdd">新增组织</Button>
        </FormItem>
      </Form>
    </div>
    <div class="bg-white p-2" style="height: 88%" ref="tableContent">
      <Table
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        bordered
        :scroll="{ y: height - 100 }"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.key === 'status'">
            <Tag color="green" v-if="record.status === 0">启用</Tag>
            <Tag color="red" v-else>关闭</Tag>
          </template>
          <template v-if="column.key === 'createTime'">
            <span class="ml10">{{
              dayjs(record.createTime).format("YYYY-MM-DD")
            }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <Button type="link" @click="handleEdit(record)">修改</Button>
            <Popconfirm
              title="确认删除?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDelete(record.id)"
            >
              <Button type="text" danger>删除</Button>
            </Popconfirm>
          </template>
        </template>
      </Table>
    </div>
    <!-- 新增修改组件 -->
    <CompanyDrawer ref="companyDrawerRef" />
  </pageWrap>
</template>
<style scoped lang="less"></style>
